<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="generator" content="emlog">
    <!-- Bootstrap Styles-->
    <link href="/jsp/system/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/jsp/system/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/jsp/system/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/jsp/system/assets/css/custom-styles.css" rel="stylesheet" />
	<link href="/jsp/system/assets/css/select2.min.css" rel="stylesheet" />
    <!-- jQuery Js -->
    <script src="/jsp/system/assets/js/jquery2.1.1.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/bootstrap-3.3.0.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/jqPaginator.js" type="text/javascript"></script>
	<script src="/jsp/system/assets/js/select2.min.js" type="text/javascript"></script>
</head>
<style>
@media (max-width: 960px){
	.js-example-basic-multiple{
		width: 85px;
	}
}
</style>
<body>
 <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">CourageAQ博客</a>
            </div>

        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <a class="active-menu" href="/backblog/index.action"><i class="fa fa-dashboard"></i>文章列表</a>
                    </li>
                     <li>
                        <a href="/backblog/type.action"><i class="fa fa-dashboard"></i>文章分类</a>
                    </li>
                    <li>
                        <a href="/backblog/upload.action"><i class="fa fa-desktop"></i>文章上传</a>
                    </li>
                 </ul>
            </div>
        </nav>
        <!-- /. NAV SIDE  -->
        
        <!--  正文内容-->
        <div id="page-wrapper">
            <div id="page-inner">
            	<div class="row">
					<div class="form-group form-horizontal">
						<div class="col-xs-4 col-md-2">
							<input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" style="height: 32px;">
						</div>
						<div class="col-xs-3 col-md-2">
							<select name="type" id="type" placeholder="请输入标题" class="js-example-basic-multiple"  multiple="multiple">
							</select>
						</div>
						<div class="col-xs-5">
							<button type="submit" class="btn btn-sm btn-success search"> <i class="fa fa-search"></i>搜索</button>
							<button type="button" class="btn btn-sm btn-info add"> <i class="fa fa-plus-circle"></i>新增</button>
						</div>
					</div>
				</div>
				<div class="table-responsive" id="tables">
		     <table class="table table-bordered  table-striped table-hover" id="treeTable">
					<thead>
						<tr>
							<th style="text-align: center;">文章标题</th>
							<th style="text-align: center;">时间</th>
							<th style="text-align: center;">所属分类</th>
							<th style="text-align: center;">点击量</th>
							<th style="text-align: center;">操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
		     
			</div>
				<div id="page" class="pagination" style="float: right;"></div>
				<!-- <footer><p>Copyright &copy; 2018.Company name All rights reserved.More Templates </footer> -->
            </div>
        </div>
    </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
</body>
<script>
$(document).ready(function(){

	var totalPages = "${pages.totalPages}";
	var pageNum = "${pages.pageNum}";
	console.log(totalPages);
	//总页数
	$('#page').jqPaginator({
	    totalPages: parseInt(totalPages),
	    visiblePages: 5,
	    currentPage: parseInt(pageNum),
	    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
	    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
	    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
	    last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
	    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
	    onPageChange: function (num) {
	    	//分页查询所有
	    	getDataJson(num);
	    }
	});
	
	//动态加载select的值，获取所有权限名称，并将用户所具有的权限默认添加
  	$.getJSON("/backblog/articletype.action",function(data){
    	console.log(data);
    	var datas=[];
		$.each(data,function(n,m){
			var jsons ={
					id: m.id,
					text: m.typename
					};
			datas.push(jsons);
		});
		$(".js-example-basic-multiple").select2({
			maximumSelectionLength: 1,			//只允许选择一个父级菜单
			data: datas
	    });
		//清空
		//$(".js-example-basic-multiple").empty();
	});
	//搜索查询
	$(".search").click(function(){
		var title = $("#title").val();
		var type = $("#type").val();
		if(type == null){
			type = "";
		}
		getDataJson("",title,type,true);
	});
	
	function getDataJson(num,title,type,state){
		if(typeof(title)=="undefined" || title == null){
			title = "";
		}
		if(typeof(type)=="undefined" || type == null){
			type = "";
		}
		var url = "";
		if(num == ""){
			url = "/backblog/list.action?title=" + title +"&type=" + type;
		}else{
			url = "/backblog/list.action?page=" + num +"&title=" + title +"&type=" + type;
		}
		
		$.get(url,function(data){
    		console.log(data);
    		var html = "";
    		$.each(data.result.item,function(m,n){
    			html+="<tr>";
    			html+="<td width='10%' style='text-align: center;'>"+ n.title+"</td>";
    			html+="<td width='5%' style='text-align: center;'>"+ n.article_time+"</td>";
    			html+="<td width='5%' style='text-align: center;'>"+ n.type+"</td>";
    			html+="<td width='5%' style='text-align: center;'>"+ n.clicknum+"</td>";
    			html+="<td width='5%' style='text-align: center;'><button class='btn btn-success btn-xs looks' id='"+n.id +"'>查看</button> <button class='btn btn-danger btn-xs delete' id='"+n.id+"'>删除</button></td>";
    			html+="</tr>";
    		});
    		$("#tbody").html(html);
    		if(state == true){
    			$('#page').jqPaginator({
        		    totalPages: parseInt(data.result.totalPages),
        		    visiblePages: 5,
        		    currentPage: parseInt(data.result.pageNum),
        		    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
        		    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
        		    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
        		    last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
        		    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
        		    onPageChange: function (num) {
        		    	getDataJson(num,title,type);
        		    }
        		});
    		}
    		
    		//删除
    		$(".delete").click(function(){
				var id = $(this).attr("id");
				$.get("/backblog/delete.action?id="+id,function(data){
					if(data =="1"){
						//alert("删除成功");
						location.reload();
					}
				});
    		});
    		
    		//查看
    		$(".looks").on("click",function(){
    			var url = "/backblog/look.html?id=" + $(this).attr("id");
				var iWidth=800; //弹出窗口的宽度;
				var iHeight=600; //弹出窗口的高度;
				var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
				console.log();
				var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
				window.open (url, "newwindow", "height="+ iHeight +", width="+iHeight+", top="+iTop+", left="+iLeft+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no") 
    		});
    	});
	}
	$(".add").click(function(){
		location.href="/backblog/upload.action";
	});
});
</script>
</html>